<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="../js/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 880px;
            margin: 50px auto;
        }

        button {
            width: 80px;
            height: 80px;
        }

        .box {
            width: 300px;
            height: 150px;
            background: pink;
        }

        .box1 {
            width: 300px;
            height: 100px;
            background: yellowgreen;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <!-- 容器|模板 -->
    <div id="app">
        <Count v-for="(item,index) in 4" :key="index"></Count>
        <Big v-for="(item,index) in 4" :key="index"></Big>
        <!-- 使用单闭合标签 只会显示一个 -->
    </div>
</body>

</html>
<script>
    // 注意：script从上到下执行   子组件写组件后报错


    // 作为Count子组件
    let Hellow = Vue.extend({
        template: '<h1>我是老小</h1>'
    })


    // 定义一个组件：利用的是Vue.extend方法去定义组件
    // extend方法里面也需要传递配置对象，extend配置对象与vue配置对象几乎一样
    let Count = Vue.extend({
        // 必须要用函数方式  并且返回一个对象
        // 必须要使用函数方式的原因：使用多个组件间互不影响
        data() {
            return { count: 1 }
        },
        // 组件的结构  模板字符串才能换行
        template: `
        <div class="box">
            <button @click="minus">---</button>
            <span>{{count}}</span>
            <button @click="add">+++</button>
            <Hellow></Hellow>
        </div>`,
        methods: {
            add() {
                this.count++
            },
            minus() {
                this.count--
            }
        },
        components: {
            Hellow
        }
    })




    let Big = Vue.extend({
        data() {
            return { f: 16 }
        },
        template: `
        <div class="box1">
            <p :style="{fontSize:f+'px'}" @click="f++">点击我会长大哈哈哈</p>
        </div>
        `
    })


    //关联VM
    const VM = new Vue({
        el: '#app',
        // vm要注册自己想要使用的组件
        components: {
            // 注册组件时：在使用组件时用的是k,而不是v  [k:v] 
            Count,
            Big
        }
    })



    // 总结：
        //组件的使用分为三步。
        //第一步:定义，需要通过Vue.extend方法进行定义。[extend里面配置项与Vue配置项几乎一模一样]
            //组件不能书写el、组件的响应式数据务必比是函数写法
            // 组件结构使用template 并且使用模板字符串填写


        //第二步:注册。某一个地方需要组件，进行注册。在components配置项进行注册


        //第三步:使用。【是以自定义标签的形式使用，首字母一般大写】


</script>